<!-- 收货方扫描签收的图片确认列表 -->
<template>
  <div class="gridContainer">
    <div class="m-det-warp mb30">
      <div class="m-det-tit">{{data.SaleCorpName}}</div>
      <div class="m-det-list">
        <ul class="m-det-ul">
          <li class="displayflex">
            <span class="label">送货清单数：</span>
            <div class="flex1 value"><em>{{data.shOrdercount}}</em></div>
          </li>
          <li class="displayflex">
            <span class="label">取货清单数：</span>
            <div class="flex1 value"><em>{{data.qhOrdercount}}</em></div>
          </li>
          <li class="displayflex">
            <span class="label">联系人：</span>
            <div class="flex1 value">{{data.SendContacts}} {{data.SendContactsTel}}</div>
          </li>
          <li class="displayflex">
            <span class="label">地址：</span>
            <div class="flex1 value">{{data.ArrivalAddress}}</div>
          </li>
        </ul>
      </div>
    </div>

    <uploader :title="'交货回执单上传'"
              :img-list="imgList"
              :max="9"></uploader>

    <div class="m-form-wrap">

      <div class="m-form-box">
        <span class="txt">备注</span>
        <div class="m-form-ipt">
          <textarea type="text"
                    placeholder="请输入备注信息"
                    v-model="Memo"></textarea>
        </div>
      </div>
    </div>
    <div class="w100fix"></div>
    <div class="checknum-bot displayflex">
      <div class="num">共<em class="red">{{data.OrdersPKGS}}</em>件商品</div>
      <div class="flex1">
        <ul class="cf cn-btn-grp f-r">
          <li class="btn-checknum f-l cancel"
              @click="backLink()">取消</li>
          <li class="btn-checknum f-l"
              @click="Confirm()">交货完成</li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
import uploader from '@/components/share/imageUploader/imageUploader.vue';

export default {
  components: {
    uploader,
  },
  data () {
    return {
      reasonList: [
        ['请选择']
      ],
      data: [],
      goodslist: [],
      imgseize: 0,
      imgList: [],
      imgListBd: [],
      guid: "",
      Memo: "",
      ReceiverID: "",
      ReceiverName: "",
      PRContactsTel: "",

      totalNum: 0,
      checkedName: "",
      reason: [],
      curHos: "",
      Carrierlist: [],
      showHos: false,
      signName: '',
    };
  },
  computed: {
    userinfo () {
      return localStorage.userinfo ? JSON.parse(localStorage.userinfo) : null;
    }
  },
  created () {
    this.getData();
  },
  methods: {
    onChange (value) {
      this.reason = value;
    },

    getData () {
      this.data = JSON.parse(this.$route.query.item);
      console.log(this.$route.query.item);
    },
    change (val) {
      this.imgseize = val;
    },
    Confirm () {
      var self = this;
      self.imgseize = 0;
      let imgList = [];
      this.imgList.forEach((x) => {
        let item = x.split(',')[1];
        imgList.push(item);
        self.imgseize = self.imgseize + (x.length / 1024);
      });
      // alert(parseFloat(self.imgseize / 1024).toFixed(2));
      // console.log(self.imgseize);
      // if (this.imgList.length > 0) {
      //   if (parseFloat(self.imgseize / 1024).toFixed(2) > 2) {
      //     this.Toast({
      //       message: "图片大小不能超过2M",
      //     });
      //   }
      // }
      var query = {
        Guid: this.data.Guid,
        imgurla: imgList,
        SaleCorpGUID: this.data.SaleCorpGUID,
        SaleCorpName: this.data.SaleCorpName,
        ArrivalAddress: this.data.ArrivalAddress,
        Receiver: this.userinfo.StaffID,
        ReceiverName: this.userinfo.Name,
        Memo: this.Memo
      };
      console.log(query);
      this.Ajax.post("HandoverConfirmGroup", query).then((res) => {
        if (res.IsSuccess) {
          let self = this;
          // this.Toast({
          //   message: '交货成功',
          //   position: 'middle',
          //   duration: 5000
          // });
          // self.imgList = [];
          // self.imgListBd = [];
          // self.$router.push({
          //   path: "/driver/cardeliverygrup"
          // });
          self.imgList = [];
          self.imgListBd = [];
          this.$router.go(-1);
          // self.$router.push({
          //   path: "/driver/cardeliverygrup"
          // });
          this.$vux.toast.show({
            text: '交货成功',
            type: 'success',
            time: 1000,
            onHide () {
              //location.reload();
            }
          });
        } else {
          this.Toast({
            message: res.ErrorMessage || "出错了，请刷新重试",
          });
        }
      }).catch(e => {
        console.log(e);
        this.Toast({
          message: '出错了，请刷新重试',
        });
      });
    },

    getRefusalreasonData: function () {
      let query = {
        TypeValue: "Refusalreason"
      };
      this.Ajax.post("GetDatadictionaries", query).then((res) => {
        if (res.IsSuccess) {
          if (res.Datas.length > 0) {
            res.Datas.forEach(x => {
              this.reasonList[0].push(x.DataIntroduction);
            });
          }
        } else {
          this.Toast('出现错误，请刷新重试');
        }
      }).catch(e => {
        console.log(e);
        this.Toast('出现错误，请刷新重试');
      });
    },

    selectNames: function (vol, index) {
      var self = this;
      if (index == "01") {
        self.moneshow = true;
      }
      self.checkedName = vol;
    },
    backLink () {
      this.$router.push({
        path: '/driver/cardeliverygrup'
      })
    }
  },
};
</script>